<template>
    <div style="background:#eee;padding: 20px;width: 100%;">
        <Card :bordered="false">
            <p slot="title">{{$store.state.title}}</p>
            <p v-html='this.$store.state.content'></p>
        </Card>
        <br>
        <Button type="primary" @click="tianjia">添加数据</Button>
        	 <Table border :columns="columns" :data="data"></Table>
        <br>
        <Page :total="total" :page-size="rows" @on-change="onChangePage" 
        :page-size-opts=[5,10,15,20] @on-page-size-change="onPageSizeChange" show-sizer />
        <Modal
        v-model="modalForm"
        title="数据操作"
        >
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="用户Id" prop="userId">
                    <Input v-model="formValidate.userId" placeholder="Enter userId"></Input>
                </FormItem>
                <FormItem label="用户名" prop="userName">
                    <Input v-model="formValidate.userName" placeholder="Enter userName"></Input>
                </FormItem>
                <FormItem label="评论内容" prop="commentContent">
                    <Input v-model="formValidate.commentContent" placeholder="Enter commentContent"></Input>
                </FormItem>
                <FormItem label="评论时间" prop="commentTime">
                    <Input v-model="formValidate.commentTime" placeholder="Enter commentTime" ></Input>
                </FormItem>
                <FormItem label="点赞数" prop="goodNumber">
                    <Input v-model="formValidate.goodNumber" placeholder="Enter goodNumber" number></Input>
                </FormItem>
                <FormItem label="反对数" prop="badNumber">
                    <Input v-model="formValidate.badNumber" placeholder="Enter badNumber" number></Input>
                </FormItem>
                
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                </FormItem>
            </Form>
            <div slot="footer">
                版权所有，违者必究
            </div>
        </Modal>
    </div>
    
</template>

<script>

    export default {
        data () {
            return {
                myUrl:this.GLO.myUrl,
                formValidate: {                  
                    userId: '',
                    userName: '',
                    commentContent: '',
                    commentTime: '',
                    goodNumber: '',
                    badNumber: '',
                    informationId:''
                },
                ruleValidate: {
                    userId: [
                        { required: true, message: 'userId不能为空', trigger: 'blur' }
                    ],
                    userName: [
                        { required: true, message: 'userName不能为空', trigger: 'blur' },
                    ],
                    commentContent: [
                        { required: true, message: 'commentContent不能为空', trigger: 'blur' }
                    ],
                    commentTime: [
                        { required: true, message: 'commentTime不能为空', trigger: 'blur' }
                    ],
                    goodNumber: [
                        
                    ],
                    badNumber: [
                       
                    ]
                },
                
                columns: [
                    
                    {
                        title: '用户ID',
                        key: 'userId',
                        width:150,
                        fixed:'left'
                    },
                    {
                        title: '用户名',
                        key: 'userName',
                        width:100
                    },
                    {
                        title: '评论内容',
                        key: 'commentContent',
                        width: 500,
                        ellipsis:true
                    },
                    {
                        title: '评论时间',
                        key: 'commentTime',
                        width:130
                    },{
                        title: '点赞数',
                        key: 'goodNumber',
                        width:80
                    },
                    {
                        title: '反对数',
                        key: 'badNumber',
                        width:80
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        fixed:'right',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row._id);
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {              
                                            this.remove(params.row._id); 
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data: [],
                total:0,
                page:1,
                rows:5,
                modalForm :false                 
            }
        },
        methods: {

            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('操作成功!');
                        if(this.formValidate._id){
                            this.axios({
                            url:this.myUrl+'comments/data/'+this.formValidate._id,
                            method:'put',
                            data:this.formValidate,
                        }).then(res=>{
                            this.modalForm=false;
                            this.getData();     
                        });

                        }else{
                            this.axios({
                                url:this.myUrl+'comments/data',
                                method:'post',
                                data:this.formValidate
                            }).then(res=>{
                                this.modalForm=false;
                                this.getData();
                            });

                        }
                        
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },

            edit(id) {
            	
                //请求数据，打开对话框，显示表单数据，提交
                this.axios({
                    url:this.myUrl+'comments/data/'+id,
                    method:'get'
                }).then(res=>{
                    this.formValidate=res.data;
                    this.modalForm=true;
                })
            },
            remove (id) {
                 this.$Modal.confirm({
                    title: '确认操作',
                    content: '<p>确认执行删除该数据的操作？</p>',
                    onOk: () => {
                        this.axios({
                    url:this.myUrl+'comments/data/'+id,
                    method:'delete'
                }).then(res=>{
                    this.getData();
                });
                    },
                    onCancel: () => {
                        this.$Message.info('取消操作');
                    }
                });              
},

            getData(){
                this.axios({
                    url:this.myUrl+'comments/list',
                    method:'post',
                    data:{
                        page:this.page,
                        rows:this.rows,
                        sid:this.$store.state.sid
                    }
                }).then(res=>{
                    this.total = res.data.total;
                    this.data = res.data.rows;
                });
            }
            ,onChangePage(page){
               this.page=page;
               this.getData();
            },
            onPageSizeChange(rows){
                this.rows=rows;
                this.getData();
            },
            tianjia(){
            	this.modalForm=true;
            	var date=new Date();
            	this.formValidate.commentTime=date.getMonth()+1+'/'+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
            }
        },
        mounted() {
             this.getData();
             this.formValidate.informationId=this.$store.state.sid;
        }
       
    }
</script>

   





   
